<template>
  <div class="my-body">
    <el-form :inline="true" :modal="searchForm">
      <el-form-item>
        <el-input placeholder="请输入" v-model="searchForm.userName" maxlength="100">
          <template slot="prepend">用户名</template>
        </el-input>
      </el-form-item>
      <el-button type="primary" style="width: 100px" @click="init">查询</el-button>
      <el-button type="primary" plain style="width: 100px" @click="add">添加</el-button>
    </el-form>
    <el-table :data="tableData" border ref="multipleTable">
      <el-table-column label="用户名" prop="userName"/>
      <el-table-column label="名字" prop="actualName"/>
      <el-table-column label="身份证" prop="identityCard"/>
      <el-table-column label="手机号" prop="phone"/>
      <el-table-column label="角色" prop="roleNames"/>
      <el-table-column label="组织" prop="auMechanisms"/>
      <el-table-column label="邮箱" prop="email"/>
      <el-table-column label="有效期" prop="accountNonExpired"/>
      <el-table-column label="启动" prop="enabled.desc"/>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-link type="primary" :loading="loading" :underline="false" @click="edit(scope.row)">编辑</el-link>
          <el-link type="success" :loading="loading" :underline="false"
                   @click="configurationOrganization(scope.row,'dialogShowC')"
                   style="margin-left: 5px;">配置角色
          </el-link>
          <el-link type="warning" :loading="loading" :underline="false"
                   @click="configurationOrganization(scope.row,'dialogShow')"
                   style="margin-left: 5px;">配置组织
          </el-link>
          <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="del(scope.row)">
            <el-link type="danger" slot="reference" :loading="loading" :underline="false" style="margin-left: 5px;">删除
            </el-link>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" style="margin-top: 10px" v-show="page.total"
                   :page-size="page.pageSize"
                   :total="page.total"
                   :current-page="page.currentPage"
                   @current-change="currentChange">
    </el-pagination>
    <!--  编辑-->
    <el-dialog title="配置组织" :close-on-click-modal="false" :visible.sync="dialogShow" width="500px" @close="closeMode">
      <el-tree
          :data="mechanism"
          show-checkbox
          node-key="id" ref="mechanism"
          default-expand-all :props="{label:'mechanismName'}"
          :expand-on-click-node="false">
      </el-tree>
      <el-row type="flex" justify="center" style="margin-top: 10px">
        <el-button @click="dialogShow = false">关闭</el-button>
        <el-button type="primary" @click="submit()" :loading="loading">提交</el-button>
      </el-row>
    </el-dialog>
    <!--  配置角色  -->
    <el-dialog title="配置角色" :close-on-click-modal="false" width="500px" :visible.sync="dialogShowC" @close="closeMode">
      <el-select style="width: 100%"
                 v-model="roleNameList"
                 multiple
                 filterable
                 remote
                 reserve-keyword
                 placeholder="请输入关键词"
                 :remote-method="getRole"
                 :loading="loading">
        <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id">
        </el-option>
      </el-select>
      <el-row type="flex" justify="center" style="margin-top: 10px">
        <el-button @click="dialogShowC = false">关闭</el-button>
        <el-button type="primary" @click="submitC()" :loading="loading">提交</el-button>
      </el-row>
    </el-dialog>
    <!--  编辑-->
    <el-dialog title="编辑" :visible.sync="dialogShowB" width="500px" @close="closeMode">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" style="margin-right: 50px">
        <el-form-item label="账号：" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入" :maxlength="20"/>
        </el-form-item>
        <el-form-item label="名字：" prop="actualName">
          <el-input v-model="form.actualName" placeholder="请输入" :maxlength="20"/>
        </el-form-item>
        <el-form-item label="身份证号：" prop="identityCard">
          <el-input v-model="form.identityCard" placeholder="请输入" maxlength="20"/>
        </el-form-item>
        <el-form-item label="手机号：" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入" :maxlength="11"/>
        </el-form-item>
        <el-form-item label="邮箱：" prop="email">
          <el-input v-model="form.email" placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="有效期：" prop="accountNonExpired">
          <el-date-picker style="width: 100%" value-format="yyyy-MM-dd"
                          v-model="form.accountNonExpired"
                          type="date"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="启用：" prop="enabled">
          {{ form.enabled.code }}
          <el-switch
              v-model="form.enabled.code"
              :active-value="0"
              :inactive-value="1"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-button @click="dialogShowB = false">关闭</el-button>
        <el-button type="primary" @click="submitB()" :loading="loading">提交</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import service from "@/api/service";
import table from "@/mixins/table";

export default {
  name: "user",
  mixins: [table],
  data() {
    return {
      form: {
        userName: '',
        actualName: '',
        phone: '',
        identityCard: '',
        accountNonExpired: '',
        email: '',
        enabled: {}
      },
      roleNameList: [],
      rules: {
        userName: [{required: true, trigger: 'blur', message: '不能为空'}, {
          pattern: /[_a-zA-Z0-9_]/,
          message: '用户名为英文字母数字长度',
        }],
        phone: {
          pattern: /^1[3456789]\d{9}$/,
          message: '手机号格式不对',
          trigger: 'blur'
        },
        identityCard: {
          pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
          message: '身份证号格式不对',
          trigger: 'blur'
        },
        email: {
          pattern: /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/,
          message: '邮箱格式不对',
          trigger: 'blur'
        }
      },
      mechanism: [],
      dialogShowB: false,
      dialogShowC: false,
      roleList: [],
      loading: false,
    }
  },
  mounted() {
    service.get('/small-service-account/au-mechanism').then(res => {
      if (res.status === 200) {
        this.mechanism = res.data;
      }
    })
    this.getRole()
    this.init()
  },
  methods: {
    getRole(v) {
      service.get('/small-service-account/au-role', {
        roleName: v
      }).then(res => {
        if (res.status === 200) {
          this.roleList = res.data;
        }
      })
    },
    init() {
      let form = {
        ...this.searchForm,
        page: this.page.currentPage
      }
      service.get('/small-service-account/au-user', form).then(res => {
        if (res.status === 200) {
          this.tableData = res.data;
          this.page.total = res.total;
        }
      })
    },
    add() {
      this.dialogShowB = true;
      this.form = {
        enabled:{
          code:1
        }
      }
    },
    submit() {
      this.loading = true
      let arr = this.$refs.mechanism.getCheckedKeys()
      let list = this.$refs.mechanism.getCheckedNodes()
      let a = []
      list.forEach(v => {
        let bo = true
        a.forEach(b => {
          if (v.parentId === b.id) {
            b = v
            bo = false
          }
        })
        if (bo) {
          a.push(v)
        }
      })
      let listB = []
      a.forEach(v => listB.push(v.id))
      service.put('/small-service-account/au-user/mechanism', {
        auUserId: this.row.id,
        auMechanismId: arr,
        auMechanismDirectlyUnderId: listB,
      }).then(this.callback)

    },
    submitB() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          let form = {...this.form}
          form.enabled = form.enabled.code === 0 ? 'ENABLE' : 'NOT_ACTIVATED'
          if (form.id) {
            service.put('/small-service-account/au-user', form).then(res => {
              if (res.status === 200) {
                this.$message.success(res.message)
                this.dialogShowB = false
                this.init()
                this.loading = false
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            service.post('/small-service-account/au-user', form).then(res => {
              if (res.status === 200) {
                this.$message.success(res.message)
                this.dialogShowB = false
                this.init()
                this.loading = false
              } else {
                this.$message.error(res.message)
              }
            })
          }
        }
      })
    },
    submitC() {
      this.loading = true
      service.put('/small-service-account/au-user/set-role', {
        userIds: [this.row.id],
        roleIds: this.roleNameList
      }).then(res => {
        this.loading = false
        if (res.status === 200) {
          this.$message.success(res.message)
          this.dialogShowC = false
          this.init()
        } else {
          this.$message.error(res.message)
        }
      })

    },
    configurationOrganization(row, dialogShow) {
      this.row = row
      this[dialogShow] = true
    },
    edit(row) {
      this.form = row
      switch (row.enabled.code) {
        case true:
          this.form.enabled = 'ENABLE';
          break;
        case false:
          this.form.enabled = 'NOT_ACTIVATED';
          break;
      }
      this.dialogShowB = true
    },
    del(row) {
      service.del('/small-service-account/au-user', {id: row.id}).then(this.callback)
    },
  }
}
</script>

<style scoped>

</style>